import React from 'react'
import { Modal, Button, Form, Input, Transfer, Col } from 'antd'
import LwjTable from 'components/LwjTable/LwjTable'
import { searchData } from 'utils/utils'

const FormItem = Form.Item
const Search = Input.Search
const UserRoles = ({ dataSource, dispatch, organizationIds, userId, searchKeyword, showBindOrganizationModal,loading }) => {
  // 处理data
  if (searchKeyword !== '') {
    dataSource = searchData(dataSource, searchKeyword)
  }

  const columns = [
    {
      title: '组织机构名称',
      dataIndex: 'name',
      key: 'name',
      width: 300
    }
  ]

  const modalProps = {
    visible: showBindOrganizationModal,
    destroyOnClose: true,
    width:800,
    loading:loading.global,
    title: '绑定组织机构',
    onCancel: () => {
      dispatch({
        type: 'user/showUserOrganizationsModal',
        payload: false
      })
      dispatch({ type: 'organization/setSearchKeyword', payload: { keyword: '' } })
    },
    onOk: () => {
      /** @namespace currentItem.organizationId */
      dispatch({
        type: 'user/onBindOrganizations',
        payload: {
          userId: userId,
          organizationIds: organizationIds,
        }
      })
      dispatch({ type: 'organization/setSearchKeyword', payload: { keyword: '' } })

    }
  }
  const sourceWithoutParent = dataSource.filter(value => {
    return value.parentId !== "-1"
  })
  const listProps = {
    pagination: false,
    dispatch,
    selectType: 'multiple',
    selectedRowKeys: organizationIds,
    onSelectRows: (selectedRowKeys) => {
      dispatch({
        type: 'user/bindSelectedIds',
        payload: {
          organizationIds: selectedRowKeys
        }
      })
    }
  }
  const transferProps = {
    dataSource: sourceWithoutParent,
    // selectedKeys: organizationIds,
    targetKeys: organizationIds
  }

  const onChange = (e) => {
    const value = e.target.value
    dispatch({
      type: 'organization/setSearchKeyword',
      payload: { keyword: value }
    })
  }
  const onSelectTransfer = (selectedRowKeys) => {
    dispatch({
      type: 'user/bindSelectedIds',
      payload: {
        organizationIds: selectedRowKeys
      }
    })
  }
  return (
    <div>
      <Modal {...modalProps}>
        <Search placeholder="搜索" onChange={onChange} />
        <div style={{
          overflowY: 'auto',
          height: '600px',
        }}>
          {/* <LwjTable
            dataSource={sourceWithoutParent}
            {...listProps}
            columns={columns} /> */}

          <Transfer
            dataSource={sourceWithoutParent}
            showSearch
            listStyle ={{width:353,height:600}}
            titles={['未关联门店', '已关联门店']}
            targetKeys={organizationIds}
            onChange={onSelectTransfer}
            render={item => item.name}
            rowKey={item => item.id}
          />
        </div>
      </Modal>
    </div>
  )
}

export default UserRoles
